<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Recos</title>
    <meta name="description" content="Recos">
    <meta name="keywords" content="Recos">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link href="../plugins/quill/quill.snow.css" rel="stylesheet">
    <link href="../plugins/quill/quill.bubble.css" rel="stylesheet">
    <link href="../plugins/quill/quill.core.css" rel="stylesheet">
    <link href="../css/dot.css" rel="stylesheet">
    <script src="../plugins/quill/quill.js"></script>

</head>
<body class="hold-transition">

<div id="app" class="app">
<!--    <iframe src="sidebar.html" ></iframe>-->
    <!-- 使用JavaScript加载侧边栏内容 -->
    <div id="sidebar-container"></div>

    <!-- 其他内容 -->
    <script>
        // 使用JavaScript加载侧边栏内容
        const sidebarContainer = document.getElementById("sidebar-container");
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "sidebar.html", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                sidebarContainer.innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    </script>

    <div id="page-container">
        <div class="content-header">
            <h1 aria-label="center">Recos-服务中心</h1>
            <hr>
            <el-button @click="clearToken">退出登录</el-button>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
            </el-breadcrumb>

        </div>
        <div class="app-container">
            <div class="box" >
                <div v-show="standaloneShow">
                    <h3 aria-label="center">当前Recos为单机启动模式</h3>
                </div>
                <div v-show="groupShow" >
                    <h3 aria-label="center">集群信息</h3>
                    <el-card class="box-card" >
                        <div slot="header" class="clearfix">
                            <span>本机信息</span>
                        </div>
                        <div  class="text item" style="font-size: 8px">
                            {{'本机详情 ' + baseInfo }}
                        </div>
                        <div  class="text item">
                            {{'本机地址 ' + meAddress }}
                        </div>
                        <div  class="text item">
                            {{'本机角色 ' + meRole }}
                        </div>

                        <div  class="text item">
                            {{'机器数量 ' + groupNum }}
                        </div>

                    </el-card>

                    <div>
                        <h4 aria-label="center">集群信息</h4>
                    </div>

                    <div id="group-dot">
                    </div>
                </div>


                <div><h3 aria-label="center">RPC客户端基本信息</h3></div>

                <el-table  size="small" current-row-key="id"
                           :data="dataList" stripe highlight-current-row
                           :cell-style="cellStyle"
                           @selection-change="handleSelectionChange">
                    <el-table-column
                            type = 'selection'
                            label="是否选中"
                            width="45"
                            prop="nId">
                    </el-table-column>
                    <el-table-column label="服务名" align="center" prop="appName" ></el-table-column>
                    <el-table-column label="RPC服务URL" align="center" prop="url" ></el-table-column>
                    <el-table-column label="权重值" align="center" prop="weight"></el-table-column>

                    <el-table-column label="存活状况" align="center" prop="alive"></el-table-column>


                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button slot="reference" type="primary" size="mini" prop="href"  @click="gotoHref(scope.row)">查看详情</el-button>

                            <!--                                    <el-button size="mini" type="danger" @click="adviceOutline(scope.row)">下线服务</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination-container">
                    <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>

                <div><h3 aria-label="center">RPC客户端已提供的服务</h3></div>

                <el-table  size="small" current-row-key="id"
                           :data="dataList2" stripe highlight-current-row
                           :cell-style="cellStyle"
                           @selection-change="handleSelectionChange">
                    <el-table-column
                            type = 'selection'
                            label="是否选中"
                            width="45"
                            prop="nId">
                    </el-table-column>
                    <el-table-column label="服务接口名称" align="center" prop="interfaceName" ></el-table-column>
                    <el-table-column label="服务提供者" align="center" prop="providerName" ></el-table-column>
                    <el-table-column label="服务实现" align="center" prop="instanceName" ></el-table-column>
                    <el-table-column label="服务详情" align="center" prop="details" ></el-table-column>

                </el-table>

                <div class="pagination-container">
                    <el-pagination
                            class="pagiantion2"
                            @current-change="handleCurrentChange2"
                            :current-page="pagination2.currentPage"
                            :page-size="pagination2.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination2.total">
                    </el-pagination>
                </div>


            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>


<script src="../plugins/quill/vue-quill-editor.js"></script>
<script src="../js/token.js"></script>
<script>

    var vue = new Vue({
        el: '#app',
        data:{
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:5,//每页显示的记录数
                total:0,//总记录数
                queryString:null,//查询条件
                sId:0//学校id
            },
            pagination2:{//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:5,//每页显示的记录数
                total:0,//总记录数
                queryString:null,//查询条件
                sId:0//学校id
            },
            mode: 'standalone',
            groupShow: false,
            standaloneShow: false,
            meAddress: '127.0.0.1:6380',
            meRole: 'leader',
            baseInfo: '',
            groupNum: 3,

            redisServerPath: "/redisServer",
            recosServerPath: "/recos/server",
            recosGroupPath: "/recos/group",
            dataList: [],
            dataList2: [],
            showDetais:false,

        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            if (!getToken() || getToken()==''){
                window.location.href="./login.html"
            }
            //初始化后自动分页查询
            this.findPage();
            this.findPage2();
            this.initGroup();
        },
        methods: {
            initGroup(){
                axios.get(this.recosGroupPath+"/info",getAxiosConfig()).then((res)=>{
                    if (res.data.success){
                        var result=res.data.data;
                        if (result.mode==1){
                            this.groupShow=true;
                            var info=result.info;
                            this.meAddress=info.address
                            this.meRole=info.role
                            this.baseInfo=info.baseInfo
                            this.groupNum=info.groupNum

                            var groupInfos=result.groupInfos;
                            this.renderGroupInfos(groupInfos);
                        }else {
                            this.standaloneShow=true;
                        }
                    }else if (res.data.code==-555){
                        window.location.href="./login.html";
                    }
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });

            },

            renderGroupInfos(groupInfos) {
                // 获取要插入标签的父容器
                const container = document.getElementById('group-dot');
                // 创建多个 el-tooltip 标签
                const tooltipCount = groupInfos.length; // 你可以根据需要更改标签数量

                for (let i = 0; i < tooltipCount; i++) {
                    var groupInfo = groupInfos[i];

                    // 创建包含红点的 span 元素
                    const span = document.createElement('span');
                    var health;
                    if (groupInfo.health == 'h') {
                        health = 'healthy';
                        span.setAttribute('class', 'dot green');
                    } else if (groupInfo.health == 'd') {
                        health = 'dead';
                        span.setAttribute('class', 'dot red');
                    } else {
                        health = 'sick'
                        span.setAttribute('class', 'dot yellow');
                    }

                    // 添加 CSS 样式来创建悬浮框效果
                    span.style.position = 'relative';
                    span.style.marginRight = '15px';

                    const link = document.createElement('a');
                    link.textContent = '  ____';
                    link.target = '_blank';
                    link.href = groupInfo.address+'/index'; // 设置跳转链接
                    span.appendChild(link);
                    // 创建悬浮框元素
                    const tooltip = document.createElement('div');

                    var content = '地址: ' + groupInfo.address + '<br>角色 ：' + groupInfo.role + '<br>健康 ：' + health;
                    tooltip.innerHTML  = content;
                    tooltip.style.display = 'none';
                    tooltip.style.position = 'absolute';
                    tooltip.style.top = '20px'; // 调整悬浮框的位置
                    tooltip.style.left = '0';
                    tooltip.style.backgroundColor = '#333';
                    tooltip.style.color = '#fff';
                    tooltip.style.padding = '5px';
                    tooltip.style.borderRadius = '5px';
                    tooltip.style.whiteSpace = 'normal';

                    // 将悬浮框元素添加到 span 元素中
                    span.appendChild(tooltip);

                    // 鼠标悬浮时显示悬浮框
                    span.addEventListener('mouseenter', () => {
                        tooltip.style.display = 'block';
                    });

                    // 鼠标移开时隐藏悬浮框
                    span.addEventListener('mouseleave', () => {
                        tooltip.style.display = 'none';
                    });

                    // 将 span 元素添加到容器中
                    container.appendChild(span);
                }
            },
            cellStyle ({ row, column, rowIndex, columnIndex }) {
                // 状态列字体颜色
                if (row.alive === 'HEALTHY' && columnIndex === 4) {
                    return 'color: #0CB618'
                } else if (row.alive === 'DEAD' && columnIndex === 4) {
                    return 'color: #EA1B29'
                } else if (row.alive === 'SICK' && columnIndex === 4){
                    return 'color: darkgrey'
                }
            },
            //分页查询
            findPage() {
                axios.post(this.recosServerPath+"/list",this.pagination,getAxiosConfig()).then((res)=>{
                    if (res.data.success){
                        this.dataList = res.data.data.list;
                        this.pagination.total = res.data.data.total;
                    }else if (res.data.code==-555){
                        window.location.href="./login.html";
                    }
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });

            },
            findPage2(){
                axios.post(this.recosServerPath+"/services",this.pagination2,getAxiosConfig()).then((res)=>{
                    if (res.data.success){
                        this.dataList2 = res.data.data.list;
                        this.pagination2.total = res.data.data.total;
                    }else if (res.data.code==-555){
                        window.location.href="./login.html";
                    }
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });
            },



            findSearchPage(){
                this.pagination.currentPage = 1;
                this.findPage();
            },
            clearTree(){
                console.log("clear..")
                this.treeNode[1].children.length=0
                this.treeNode[2].children.length=0
            },
            getDetails(row){
                //查看服务详情页
                axios.get(this.recosServerPath+"/getByappName/"+row.appName,getAxiosConfig()).then((res)=>{
                    if (res.data.success){
                        this.treeNode[0].children[0].children[0].label=res.data.data.appBean.alive;
                        this.treeNode[0].children[1].children[0].label=res.data.data.appBean.appName;
                        this.treeNode[0].children[2].children[0].label=res.data.data.appBean.url;
                        this.treeNode[0].children[3].children[0].label=res.data.data.appBean.weight;

                        this.treeNode[1].children.length=0
                        this.treeNode[2].children.length=0

                        var rs=res.data.data.registedServices;
                        var rrs=[]
                        for (i = 0; i < rs.length; i++) {
                            cld={
                                label:rs[i]
                            }
                            rrs.push(cld)
                        }
                        this.treeNode[1].children=rrs

                        var ns=res.data.data.needingsServices;
                        var nns=[]
                        for (i = 0; i < ns.length; i++) {
                            var cld={
                                label:ns[i]
                            }
                            nns.push(cld)
                        }
                        this.treeNode[2].children=nns

                    }else if (res.data.code==-555){
                        window.location.href="./login.html";
                    }
                })

            },

            gotoHref(row){
                // console.log(row.appName +" ....===><")
                //跳转到服务详情页
                window.open("/pages/details.html?appName="+row.appName+"&token="+getToken());
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            handleCurrentChange2(currentPage) {
                this.pagination2.currentPage = currentPage;
                this.findPage2();
            },
            clearToken(){
                clearLocalToken();
            },

        }
    });
    Vue.use(window.VueQuillEditor);
</script>
<style>

    .item {
        margin-top: 10px;
        margin-right: 40px;
    }

    .text {
        font-size: 14px;
    }

    /*.item {*/
    /*    margin-bottom: 18px;*/
    /*}*/

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>
</html>